<template>
  <TodoHeader @add-todo="handleAddTodo" />
  <TodoList>
    <!-- <TodoItem v-for="todo in todos" :id="todo.id" :content="todo.content" :done="todo.done"></TodoItem> -->
    <draggable :list="todos" animation="300" item-key="id">
      <template #item="item">
        <TodoItem
          v-bind="item.element"
          @toggle="handleToggleTodo"
          @edit="handleEditTodo"
          @del="handleDeleteTodo"
        ></TodoItem>
      </template>
    </draggable>
  </TodoList>
  <TodoFooter
    :todos="todos"
    @toggle-all="handleToggleAll"
    @clear-done="handleClearDone"
    @clear-all="handleClearAll"
  />
</template>

<script setup>
import draggable from 'vuedraggable'

import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoItem from './components/TodoItem.vue'
import TodoFooter from './components/TodoFooter.vue'

import useTodos from './hooks/useTodos.js'

const {
  todos,
  getTodos,
  handleAddTodo,
  handleToggleTodo,
  handleEditTodo,
  handleToggleAll,
  handleDeleteTodo,
  handleClearDone,
  handleClearAll,
} = useTodos()
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
